<template>
  <div :class="istabs ? 'commonpage' : 'commonpage currentpage'">
    <slot name="tabs"></slot>
    <section :class="istabs ? 'pagecard pagetab' : 'pagecard'">
      <div :class="['flex', title ? 'pageheader' : '']">
        <span v-if="title" class="title">{{ title }}</span>
        <div v-if="$slots.extra" class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'CommonPage',
  props: {
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    // 是否有tab页
    istabs: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/styles/variables';
.commonpage {
  height: 100%;
  ::v-deep.el-tabs__content {
    display: none;
  }
  .pagecard {
    padding: 20px;
    background: #fff;
    height: 100%;
    .pageheader {
      justify-content: space-between;
      padding-left: 15px;
      padding-bottom: 15px;
      border-bottom: 2px solid #e1e1e1;
    }
    .title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: var(--theme);
      line-height: 28px;

      &::before {
        content: '';
        width: 28px;
        height: 28px;
        display: inline-block;
        background-image: url('~@/assets/images/title.png');
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 15px;
      }
    }

    .extra {
      margin-left: auto;
    }

    .content {
      padding-top: 15px;
      height: calc(100% - 50px);
      background: #fff;
      overflow-y: auto;
      @include scrollBar();
    }
  }
  .pagetab {
    height: calc(100% - 40px);
  }
}
.currentpage {
  height: calc(100vh - 115px);
}
</style>
